var ShowTextarea = function () {
  var template = /* html */ `
    <div class="show-textarea clearfix">
      <textarea v-if="!printMode" rows="1" v-model="value" :class="{'textarea-autosize':autosize}" :style="style" :readonly="readonly"
        @input="handleInput" @change="handleChange">
      </textarea>
      <div v-else style="padding:2px" :style="style" :contenteditable="!readonly" v-html="getShowText()"></div>
      <textarea v-if="showHiddenTextarea" class="hidden-textarea" v-model="value" :style="styleObj">
      </textarea>
    </div>
  `;

  return {
    props: {
      value: {
        default: ''
      },
      autosize: {
        type: Boolean,
        default: false
      },
      readonly: {
        type: Boolean,
        default: false
      },
      printMode: {
        type: Boolean,
        default: false
      },
      textStyle: Object,
      maxHeight: Number
    },

    watch: {
      value: function () {
        var self = this;
        if (!this.autosize) {
          return;
        }
        this.showHiddenTextarea = true;
        this.$nextTick(function () {
          self.resizeTextarea();
        });
      }
    },

    computed: {
      styleObj: function () {
        var textStyle = this.textStyle;
        if (textStyle === undefined) {
          return {};
        }
        return textStyle;
      }
    },

    data: function () {
      return {
        showHiddenTextarea: true,
        style: {}
      };
    },

    mounted: function () {
      this.resizeTextarea();
    },

    methods: {
      handleInput: function () {
        this.$emit('input', this.value);
      },

      handleChange: function () {
        this.$emit('change', this.value);
      },

      resizeTextarea: function () {
        var textareaEl = $(this.$el).find('textarea.hidden-textarea')[0];
        var style = window.getComputedStyle(textareaEl);
        var boxSizing = style.getPropertyValue('box-sizing');
        var paddingSize = (
          parseFloat(style.getPropertyValue('padding-bottom')) +
          parseFloat(style.getPropertyValue('padding-top'))
        );
        var borderSize = (
          parseFloat(style.getPropertyValue('border-bottom-width')) +
          parseFloat(style.getPropertyValue('border-top-width'))
        );
        var height = textareaEl.scrollHeight;
        if (boxSizing === 'border-box') {
          height = height + borderSize;
        } else if (boxSizing === 'content-box') {
          height = height - paddingSize;
        }

        var maxHeight = this.maxHeight;
        var style = {};
        if (maxHeight !== undefined) {
          maxHeight -= 4;
          if (height > maxHeight) {
            height = maxHeight;
          }
          style.height = `${height}px`;
        }
        style.minHeight = `${height}px`;
        _.assignIn(style, this.styleObj);
        this.style = style;
        this.showHiddenTextarea = false;
      },

      getShowText: function () {
        var value = this.value;
        return value.replace(/\n/g, '<br>');
      }
    },

    template: template
  };
}();
